<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ include file="../../base.jsp"%>
<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 页面meta /-->
    <script src="${ctx}/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D1aKBWDNap6FnXHZgI5MY7OthZFbbnOl"></script>
</head>

<body>
<div style="width: 1200px;height:100px" >
    <section class="content-header">
        <h1>
            发货地选择
            <small>
                <button type="button" onclick='document.getElementById("updateForm").submit()'><font color="blue">保存</font></button>
                <button type="button" onclick="history.back(-1)"><font color="blue">返回</font></button>
        </small>
        </h1>
        <div style="height: 5px"></div>
     <div>
        <form id="updateForm" action="${ctx}/cargo/map/update.do" method="post">
            <input type="hidden" name="id" value="${shippingId.id}">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <td>
                        装运港:&nbsp;&nbsp;<input type="text" name="portOfLoading" value="${shippingId.portOfLoading}">&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
                    <td>
                        转船港:&nbsp;&nbsp;<input type="text" name="portOfTrans" value="${shippingId.portOfTrans}">&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
                    <td>
                        卸货港:&nbsp;&nbsp;<input type="text" name="portOfDischarge" value="${shippingId.portOfDischarge}">&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
                </tr>

            </table>
        </form>

     </div>
    </section>

</div>


<!--百度地图容器-->
<%--<div style="width:1200px;height:500px;border:#ccc solid 1px;font-size:12px" id="map"></div>--%>
<div style="width:100%;height:82%;border:#ccc solid 1px;font-size:12px" id="map"></div>

</body>

<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(126.205196,30.212101),6);
    }
    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }
    function addMapOverlay(){
        var markers = [
            {content:"船运",title:"青岛港",imageOffset: {width:0,height:-21},position:{lat:36.194672,lng:120.671075}},
            {content:"船运",title:"大连港",imageOffset: {width:0,height:-21},position:{lat:39.06561,lng:121.641532}},
            {content:"船运",title:"广东港",imageOffset: {width:0,height:-21},position:{lat:23.796133,lng:115.404849}},
            {content:"空运",title:"北京机场",imageOffset: {width:-46,height:-46},position:{lat:40.739914,lng:116.989462}},
            {content:"空运",title:"重庆机场",imageOffset: {width:0,height:-46},position:{lat:29.787228,lng:106.419882}},
            {content:"空运",title:"东京机场",imageOffset: {width:-115,height:-46},position:{lat:35.796466,lng:139.649425}},
            {content:"船运",title:"长崎",imageOffset: {width:-23,height:-21},position:{lat:32.909305,lng:129.94945}}
        ];
        for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                    imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
                })});
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
        };
        var labels = [
        ];
        for(var index = 0; index < labels.length; index++){
            var opt = { position: new BMap.Point(labels[index].position.lng,labels[index].position.lat )};
            var label = new BMap.Label(labels[index].content,opt);
            map.addOverlay(label);
        };
        var plOpts = [
            {strokeColor:"#f00",strokeWeight:"3",strokeOpacity:"0.4"},
            {strokeColor:"#f00",strokeWeight:"3",strokeOpacity:"0.4"},
            {strokeColor:"#f00",strokeWeight:"3",strokeOpacity:"0.4"},
            {strokeColor:"#00f",strokeWeight:"3",strokeOpacity:"0.4"},
            {strokeColor:"#f0f",strokeWeight:"3",strokeOpacity:"0.4"},
            {strokeColor:"#f00",strokeWeight:"4",strokeOpacity:"0.6"},
            {strokeColor:"#f0f",strokeWeight:"3",strokeOpacity:"0.4"}
        ];
        var plPath = [
            [   //北京机场到东京机场
                new BMap.Point(116.593013,40.417679),
                new BMap.Point(139.332072,35.767732),
                new BMap.Point(138.816947,35.647685),
                new BMap.Point(138.816947,35.647685),
                new BMap.Point(139.184893,35.286453),
                new BMap.Point(139.184893,35.286453),
                new BMap.Point(139.184893,35.286453)
            ],
            [ //重庆机场到东京机场
                new BMap.Point(138.890536,35.587594),
                new BMap.Point(105.98105,29.665553),
            ],

            [ //大连到长崎
                new BMap.Point(121.523488,38.805032),
                new BMap.Point(123.583985,36.790599),
                new BMap.Point(124.871796,34.822502),
                new BMap.Point(129.912656,33.095339),
                new BMap.Point(130.354191,32.940339),
                new BMap.Point(130.354191,32.940339),
                new BMap.Point(130.354191,32.971361)
            ],
            [   //青岛到长崎
                new BMap.Point(120.640418,36.116824),
                new BMap.Point(129.986245,32.888611),
                new BMap.Point(129.986245,32.888611),
                new BMap.Point(129.986245,32.888611)
            ],
            [ //广东到长崎
                new BMap.Point(115.921107,22.951895),
                new BMap.Point(117.46648,23.258239),
                new BMap.Point(118.82788,24.172981),
                new BMap.Point(123.353615,27.239395),
                new BMap.Point(130.638945,32.495947),
                new BMap.Point(130.638945,32.495947),
                new BMap.Point(130.638945,32.495947)
            ],

        ];
        for(var index = 0; index < plOpts.length; index++){
            var polyline = new BMap.Polyline(plPath[index],plOpts[index]);
            map.addOverlay(polyline);
        }
    }

    //向地图添加控件
    function addMapControl(){
        var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_METRIC);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:0});
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
        map.addControl(overviewControl);
    }
    var map;
    initMap();

</script>



</html>